<template>
    <n-list :show-divider="false" style="height: 100%">
        <n-list-item class="box">
            <p>任务名称：</p>
            <n-input 
            v-model:value="model.name" 
            type="text" 
            placeholder="请输入任务名称" 
            size="medium" 
            clearable 
            style="width: 100%"
            :disabled="islook"
            />
        </n-list-item>
        <n-list-item class="box">
            <p>任务类型：</p>
            <n-select v-model:value="model.type" size="medium" :disabled="islook"
            :options="taskTypeOptions" style="width: 100%"/>
        </n-list-item>
        <n-list-item class="box">
            <p>任务状态：</p>
            <n-select v-model:value="model.status" size="medium" :disabled="islook"
            :options="taskStatusOptions" style="width: 100%"/>
            <!-- <n-input
            v-model:value="model.status"
            :disabled="islook"
            type="text"/> -->
        </n-list-item>
        <n-list-item class="box">
            <p>执行周期：</p>
            <n-select v-model:value="model.time" size="medium" :disabled="islook"
            :options="taskT" style="width: 100%"/>
            <!-- <n-input
            v-model:value="model.time"
            :disabled="islook"
            type="text"/> -->
        </n-list-item>
        <n-list-item class="box">
            <p>执行时间：</p>
            <n-date-picker 
                type="daterange" 
                start-placeholder="开始日期" 
                end-placeholder="结束日期"
                update-value-on-close
                :actions="null"
                v-model:value="dateRange"
                :disabled="islook"
                @update:value="handleDateChange"
                />
            <!-- <n-input
            v-model:value="model.starttime"
            :disabled="islook"
            type="text"/> -->
        </n-list-item>
        <n-list-item class="box">
            <p>累计执行次数：</p>
            <n-input
            v-model:value="model.count"
            :disabled="islook"
            type="text"/>
        </n-list-item>
        <n-list-item class="box">
            <n-button type="primary" size="medium" @click="handelclick" block>{{ islook?'关闭':'提交' }}</n-button>
        </n-list-item>
    </n-list>
</template>

<script setup>
import { 
    NCard,
    NInput,
    NSpace, 
    NList,
    NListItem,
    NButton,
    NSelect,
    NDatePicker,
} from 'naive-ui'
import { ref } from 'vue';
import { taskUpdateApi } from '../../api/task';
const taskTypeOptions = [
    { label: '单次性任务', value: '1' },
    { label: '周期性任务', value: '2' },
]
const taskStatusOptions = [
    { label: '待执行', value: '1' },
    { label: '执行中', value: '2' },
    { label: '已完成', value: '3' }, 
    { label: '已取消', value: '4' },
]
const taskT = [
    { label: '每天', value: '1' },
    { label: '每3天', value: '2' },
    { label: '每7天', value: '3' }, 
    { label: '每月', value: '4' }, 
    { label: '自定义', value: '5' }, 
]
const props = defineProps(['rowData','isLook'])
const emit = defineEmits(['taskList'])
const model = ref({
    name: '',
    type: '', 
    time: '',
    status: '',
    starttime: null,
    endtime: null,
    count:'',
})
const islook = ref(props.isLook)
// 获取编辑数据
if(props.rowData){
    model.value = {...props.rowData}
}
// 获取时间
const dateRange = ref([model.value.starttime, model.value.endtime])
const handleDateChange = (value) => {
    model.value.starttime = value[0]
    model.value.endtime = value[1]
}
// 提交
const handelclick = async() => {
    console.log(model.value);
    let _id = props.rowData._id
    // 调整数据格式
    model.value.type = taskTypeOptions.find(opt => opt.value == model.value.type)?.label || model.value.type
    model.value.time = taskT.find(opt => opt.value == model.value.time)?.label || model.value.time
    model.value.status = taskStatusOptions.find(opt => opt.value == model.value.status)?.label || model.value.status

    await taskUpdateApi(_id,model.value)//更新到数据库
    emit('taskList',{_id:_id,...model.value}) 
}
</script>

<style lang="scss" scoped>
p{
    width: 100%;
}
.box{
    padding: 5px;
}
</style>